import { Image } from 'antd-mobile'
import { DownFill } from 'antd-mobile-icons'
import styles from '../css/chat.module.css'

function MsgLeft(props) {
  return (
    <div className={styles.left}>
      {/* 头像 */}
      <div>
        <Image
          src="https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
          width={44}
          height={44}
          fit="cover"
          style={{ borderRadius: 22 }}
        />
      </div>
      {/* 消息 */}
      <div className={styles.msg}>
        {/* 箭头 */}
        <DownFill
          color="#fff"
          className={styles.arrow}
        />
        {/* 文本 */}
        {/* <span>{props.msg}</span> */}
        <span dangerouslySetInnerHTML={{ __html: props.msg }}></span>
      </div>
    </div>
  )
}

export default MsgLeft
